<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrap/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrap/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap/css/jquery-confirm.css"/>
<link href="${pageContext.request.contextPath }/bootstrap/css/plugins/jsTree/style.min.css" rel="stylesheet">
<title>管理员账号管理</title>
</head>
<body>
	
	<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
		<button id="btn_add_admin" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增管理员
		</button>
		<button id="btn_add_admin_role" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>设置管理员角色
		</button>
	</div>
	
	<table id="admintab" class="table table-hover"></table>

	<div class="modal inmodal fade" id="AdminModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">新增管理员</h4>
               	</div>
                <div class="modal-body">
                	<div class="row">
                		<div class="col-sm-6">
                			<div class="form-group draggable">
		                    	<label class="control-label">登陆名称：</label>
		                        <input type="text" name="adminloginname" id="adminloginname" onkeyup="this.value=this.value.replace(/\s+/g,'')" class="form-control" placeholder="登陆名称">
		                   	</div>
                		</div>
                	</div>
                	<div class="row">
                		<div class="col-sm-6">
                			<div class="form-group draggable">
		                    	<label class="control-label">登录密码：</label>
		                        <input type="text" name="adminloginpwd" id="adminloginpwd" onkeyup="this.value=this.value.replace(/\s+/g,'')" class="form-control" placeholder="登陆密码">
		                   	</div>
                		</div>
                	</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="AdminSubmit()" id="AdminBtn">提交</button>
           		</div>
           	</div>
        </div>
	</div>
	
	<div class="modal inmodal fade" id="AdminRoleModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">设置管理员角色</h4>
               	</div>
                <div class="modal-body">
                	<div class="row">
                		<div class="col-sm-4">
                			<div class="ibox float-e-margins">
			                    <div class="ibox-title">
			                        <h4>选择角色</h4>
			                    </div>
			                    <div class="ibox-content">
									<div class="form-group draggable">
				                    	<label class="control-label">角色选择：</label>
				                    	<select class="form-control" name="adminrole" id="adminrole" onchange="rolechange(this.value);">
											<option value="0">---请选择---</option>
										</select>
				                   	</div>
			                    </div>
			                </div>
                		</div>
                		<div class="col-sm-8">
			                <div class="ibox float-e-margins">
			                    <div class="ibox-title">
			                        <h4>角色树形菜单预览</h4>
			                    </div>
			                    <div class="ibox-content">
			
			                        <div id="role_tree"></div>
			
			                    </div>
			                </div>
			            </div>
                	</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="AdminRoleSubmit()" id="AdminRoleBtn">提交</button>
           		</div>
           	</div>
        </div>
	</div>
	<script src="${pageContext.request.contextPath }/bootstrap/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/jquery-confirm.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/jsTree/jstree.min.js"></script>
    <script type="text/javascript">
  	//根据窗口调整表格高度
    $(window).resize(function() {
        $('#admintab').bootstrapTable('resetView', {
            height: tableHeight()
        })
    })
  	//查询按钮事件
    $('#search_btn').click(function(){
        $('#admintab').bootstrapTable('refresh', {url: '${pageContext.request.contextPath}/Main/DynamicMenu/listadminAjax.action'});
    })
    //tableHeight函数
    function tableHeight(){
        //可以根据自己页面情况进行调整
        return $(window).height();
    }
    function refreshTab(){
  		$('#admintab').bootstrapTable('refresh');
  	}
    //生成用户数据
    $('#admintab').bootstrapTable({
        method: 'get',
        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
        url:"${pageContext.request.contextPath}/Main/DynamicMenu/listadminAjax.action",//要请求数据的文件路径
        height:tableHeight(),//高度调整
        striped: true, //是否显示行间隔色
        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
        pageNumber: 1, //初始化加载第一页，默认第一页
        pagination:true,//是否分页
        queryParamsType:'limit',//查询参数组织方式
        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
            return {//这里的params是table提供的    
                offset : params.offset,//从数据库第几条记录开始    
                limit : params.limit
            //找多少条    
            };},//请求服务器时所传的参数
        sidePagination:'server',//指定服务器端分页
        pageSize:10,//单页记录数
        pageList:[10,30,50,100],//分页步进值
        showRefresh:true,//刷新按钮
        showColumns:true,
        clickToSelect: true,//是否启用点击选中行
        toolbarAlign:'right',//工具栏对齐方式
        buttonsAlign:'right',//按钮对齐方式
        toolbar:'#toolbar',//指定工作栏
        columns:[
            {
                title:'全选',
                field:'select',
                //复选框
                checkbox:true,
                width:25,
                align:'center',
                valign:'middle'
            },
            {
                title:'管理员登陆id',
                field:'adminloginid',
                visible:true
            },
            {
                title:'管理员登陆名',
                field:'adminloginname',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'管理员角色id',
                field:'roleid',
                sortable:true,
                formatter:function(value,row,index){
                	if(value==-1){
                		return "未分配角色";
                	}else{
                		return value;
                	}
                }
            },
            {
                title:'管理员角色姓名',
                field:'rolename',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'管理员账号注册时间',
                field:'registrationtime',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'账号登陆时间',
                field:'adminlogintime',
                sortable:true,
                //列数据格式化
                formatter:nullChange
            },
            {
                title:'操作',
                field:'orderstate',
                align:'center',
                //列数据格式化
                formatter:operateConfirm
            }
        ],
        locale:'zh-CN',//中文支持,
        responseHandler:function(rows){
            //在ajax获取到数据，渲染表格之前，修改数据源
            return rows;
        }
	})
	//对接收的数据作规范化，为空就显示“未填写”
	function nullChange(value,row,index){
		if(value=='null'){
			return '未填写'
		}else{
			return value;
		}
	}
	//对订单操作列添加操作标签
    function operateConfirm(value,row,index){
    	return '<button class="btn btn-info" style="height:30px" onclick="Details('+row.adminloginid+')">详情</button>';
    }
	/* 新增管理员 */
	$("#btn_add_admin").click(function(){
		$("#AdminModal").modal('show');
	})
	/* 为管理员账号分配角色 */
	$("#btn_add_admin_role").click(function(){
		var admins= $("#admintab").bootstrapTable('getSelections');
		if(admins.length<=0){
			$.alert("请选择一个或多个管理员")
		}else{
			loadrole();//加载角色下拉框
			$("#AdminRoleModal").modal('show');
		}
	})
	
	function AdminSubmit(){
		var adminloginname =$("#adminloginname").val();
		var adminloginpwd =$("#adminloginpwd").val();
		if(adminloginname=="" || adminloginpwd==""){
			$.alert('信息不可为空！');
			return false;
		}
		$("#AdminBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
		$("#AdminBtn").prop('disabled',true);
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/Main/DynamicMenu/addaminaccount.action",
			data:"adminloginname="+adminloginname+"&adminloginpwd="+adminloginpwd,
			async:true,
			success:function(data){
				$("#AdminBtn").html('提交');
    			$("#AdminBtn").prop('disabled',false);
    			$.alert(data.msg);
				if(data.code=="100"){
					refreshTab();
    				$("#AdminModal").modal('hide');
				}
			},error:function(request){
				$("#AdminBtn").html('提交');
    			$("#AdminBtn").prop('disabled',false);
    			$.alert("服务器连接错误");
			}
		});
	}
	
	function AdminRoleSubmit(){
		var admins= $("#admintab").bootstrapTable('getSelections');
		var adminrole = $("#adminrole").val();
		var code;
		var msg;
		var adminloginid;
		if(adminrole==0){
			$.alert('请选择一个角色');
			return false;
		}
		$("#AdminRoleBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
		$("#AdminRoleBtn").prop('disabled',true);
		for (var i=0;i<admins.length;i++){
			//alert(admins[i].adminloginid);
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/Main/DynamicMenu/addaminaccount.action",
				data:"lowadminloginid"+admins[i].adminloginid+"&roleid="+adminrole,
				async:true,
				success:function(data){
					code=data.code;
					msg=data.msg;
					adminloginid=admins[i].adminloginid;
					if(data.code=="100"){
						continue;
					}else{
						$.alert("管理员登陆id为"+adminloginid+" 的账号设置角色失败！");
						break;
					}
				},error:function(request){
	    			$.alert("服务器连接错误");
	    			break;
				}
			});
		}
		if(code==100){
			$.alert(msg);
		}
	}
	
	function rolechange(value){
		var adminrolename = $("#adminrole").find("option:selected").text();
		//alert(adminrolename);
		if(value!=0){
			$.jstree.destroy ("#role_tree");//重点，销毁原加载的jstree，重新加载新的jstree
			Initroletree(adminrolename);
		}else{
			$.jstree.destroy ("#role_tree");//重点，销毁原加载的jstree，重新加载新的jstree
		}
	}
	/* 加载角色下拉框 */
	function loadrole(){
		$("#adminrole").empty();
		$('#adminrole').append("<option value='0' selected='selected' >" + '---请选择---' + "</option>");
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/Main/DynamicMenu/getadminrole.action",
			async: true,
			//data:"menufatherid="+menufatherid,
    		success:function(data){
    			//alert("data.details.docname="+data.details.docname);
    			if(data.code==100){
    				var datalist = data.list;
                    for (var i = 0; i < datalist.length; i++) {  
                        $('#adminrole').append("<option value='" + datalist[i].roleid + "' >" + datalist[i].rolename + "</option>");  
                    }
    			}else{
    				$.alert(data.msg);
    			}
    		},error:function(){
    			$.alert("加载角色失败!!!");
    		}
		});
	}
    </script>
    <script>
        function Initroletree(rolename){
        	var nodes=[];//父节点
        	var tnodes=[];//总的节点
        	$.ajax({
    			type:"post",
    			url:"${pageContext.request.contextPath}/Main/DynamicMenu/getadminmenu.action",
    			async: true,
    			data:"menufatherid=-1",
        		success:function(data){
        			if(data.code==100){
        				var datalist = data.list;
        				for(var i=0;i<datalist.length;i++){
        					if(datalist[i].menufatherid!=0){
        						var node={menuid:datalist[i].menuid,menuname:datalist[i].menuname,menufatherid:datalist[i].menufatherid,menuurl:datalist[i].menuurl};
            	        		tnodes.push(node);
        					}
        	        	}
        				for(var i=0;i<datalist.length;i++){
        					var tnodeskey=[];//分段子节点
        					if(datalist[i].menufatherid==0){
        						var row = datalist[i];
        						for(var j=0;j<tnodes.length;j++){
        							if(tnodes[j].menufatherid==row.menuid){
        								var node={text:tnodes[j].menuname+"-"+tnodes[j].menuurl,icon:"none"};
        								tnodeskey.push(node);
        							}
        						}
        						var Fnode={text:row.menuname,icon:"fa fa-folder",state:{"opened":false},children:tnodeskey};
        						nodes.push(Fnode);
        					}
        				}
        				$("#role_tree").jstree({
        	        		"core":{"data":{"text":rolename,"state":{"opened":true},"icon":"fa fa-folder",children:nodes}}
        	        	});
        			}else{
        				$.alert(data.msg);
        			}
        		},error:function(){
        			$.alert("加载总菜单失败!!!");
        		}
    		});
        	
        }
    </script>
</body>
</html>